<template>
    <el-card style="margin-bottom: 10px;width: 90%;">
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <h1 style="margin: 0;font-size: 24px;">SeedMsg|通用信息推送服务</h1>
            <span style="font-size: 14px;">服务状态：<span :style="`color: ${status ? 'green' : 'red'};`">{{ status ?
                '已连接' : '未连接'
                    }}</span></span>
        </div>
    </el-card>
    <el-card style="margin-bottom: 10px;width: 90%;">
        <div style="margin: 10px 0;display: flex;justify-content: right;">
            <el-button type="primary" @click="useRouter().push('/')" :disabled="!status">返回</el-button>
            <el-button type="primary" @click="addDialogVisible = true" :disabled="!status">新增</el-button>
        </div>
        <div>
            <el-table :data="crontime_list" style="width: 100%" border stripe>
                <el-table-column prop="id" label="Id" width="100" align="center" />
                <el-table-column prop="name" label="预设名称" width="240" align="center" />
                <el-table-column prop="cron" label="Cron表达式" align="center" />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button size="small" color="#a77730" @click="updateCronTimeHandle(scope.row)"
                            :disabled="!status">编辑</el-button>
                        <el-button size="small" color="#b25252" @click="deleteCronTimeHandle(scope.row)"
                            :disabled="!status">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    <el-dialog v-model="addDialogVisible" draggable title="新增定时预设" :before-close="addDialogClose">
        <div>
            <el-form :model="crontime_form" :rules="crontime_form_rules" label-width="auto" ref="add_crontime_form_ref">
                <el-form-item label="预设名称" prop="name">
                    <el-input v-model="crontime_form.name" />
                </el-form-item>
                <el-form-item label="Cron表达式" prop="cron">
                    <el-input v-model="crontime_form.cron" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div>
                <el-button @click="addDialogClose">取消</el-button>
                <el-button type="primary" @click="addCronTimeHandle">添加</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="updateDialogVisible" draggable title="更新定时预设" :before-close="updateDialogClose">
        <div>
            <el-form :model="update_crontime_form" :rules="crontime_form_rules" label-width="auto"
                ref="update_crontime_form_ref">
                <el-form-item label="预设名称" prop="name">
                    <el-input v-model="update_crontime_form.name" />
                </el-form-item>
                <el-form-item label="Cron表达式" prop="cron">
                    <el-input v-model="update_crontime_form.cron" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div>
                <el-button @click="updateDialogClose">取消</el-button>
                <el-button type="primary" @click="updateCronTime">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="deleteDialogVisible" draggable title="删除定时预设" :before-close="deleteDialogClose">
        <div>
            是否删除时间：{{ delete_crontime_form.name }}
        </div>
        <template #footer>
            <div>
                <el-button @click="deleteDialogClose">取消</el-button>
                <el-button type="danger" @click="deleteCronTime">删除</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { validateCronExpression } from 'cron'
const { connect, disconnect, status, emit, on, off } = useSocket()
// 初始化连接
onMounted(() => {
    connect()
    setupEventListeners()
})

// 清理事件监听
onUnmounted(() => {
    off('getCronTimeList')
    off('addCronTime')
    off('updateCronTime')
    off('deleteCronTime')
    disconnect()
})

const setupEventListeners = () => {
    emit('getCronTimeList')
    on('getCronTimeList', (list) => crontime_list.value = list)
    on('addCronTime', handleAddCronTime)
    on('updateCronTime', handleUpdateCronTime)
    on('deleteCronTime', handleDeleteCronTime)
}

const handleAddCronTime = (data: any) => {
    ElMessage({ message: data.message, type: data.type, showClose: true })
    emit('getCronTimeList')
}

const handleUpdateCronTime = (data: any) => {
    ElMessage({ message: data.message, type: data.type, showClose: true })
    emit('getCronTimeList')
}

const handleDeleteCronTime = (data: any) => {
    ElMessage({ message: data.message, type: data.type, showClose: true })
    emit('getCronTimeList')
}

const crontime_list = ref([])

const add_crontime_form_ref = ref()

const crontime_form = ref({
    name: '',
    cron: ''
})

const validateCron = (rule: any, value: any, callback: any) => {
    const validation = validateCronExpression(value)
    if (!validation.valid) {
        callback(new Error('Cron格式不正确'))
    } else {
        callback()
    }
}

const crontime_form_rules = ref({
    name: [{ required: true, message: '请输入预设名称', trigger: 'blur' },],
    cron: [
        { required: true, message: '请输入Cron表达式', trigger: 'blur' },
        { validator: validateCron, trigger: 'blur' },
    ]
})

const addDialogVisible = ref(false)

const addDialogClose = () => {
    addDialogVisible.value = false
    add_crontime_form_ref.value.resetFields()
}

const addCronTimeHandle = () => {
    add_crontime_form_ref.value.validate((valid: boolean) => {
        if (valid) {
            emit('addCronTime', crontime_form.value)
            addDialogClose()
        }
    })
}

const update_crontime_form_ref = ref()

const update_crontime_form = ref({
    id: '',
    name: '',
    cron: '',
    webhook: '',
    secret: '',
    template_id: '',
    template_variables: [],
    status: ''
})

const updateDialogVisible = ref(false)

const updateDialogClose = () => {
    updateDialogVisible.value = false
}

const updateCronTimeHandle = (row: any) => {
    update_crontime_form.value.id = row.id
    update_crontime_form.value.name = row.name
    update_crontime_form.value.cron = row.cron
    updateDialogVisible.value = true
}

const updateCronTime = async () => {
    update_crontime_form_ref.value.validate((valid: boolean) => {
        if (valid) {
            emit('updateCronTime', update_crontime_form.value)
            updateDialogClose()
        }
    })
}

const deleteDialogVisible = ref(false)

const delete_crontime_form = ref({
    id: '',
    name: '',
})

const deleteDialogClose = () => {
    deleteDialogVisible.value = false
}

const deleteCronTimeHandle = (row: any) => {
    delete_crontime_form.value.id = row.id
    delete_crontime_form.value.name = row.name
    deleteDialogVisible.value = true
}

const deleteCronTime = () => {
    emit('deleteCronTime', delete_crontime_form.value)
    deleteDialogClose()
}
</script>